<template>
    <div class="container">
        <Loading v-if="loadingShow" />
        <van-tabs v-model="paramsId">
            <van-tab :title="item.name" v-for="item in categoryList" :key="item.id" :name="item.id">
                <div class="containerProduct">
                    <div
                        class="ImagProduct"
                        v-for="itemChild in item.goodsList"
                        :key="itemChild.id"
                        @click="toProduction(itemChild.id)"
                    >
                        <van-image
                            width="100%"
                            height="120"
                            lazy-load
                            :src="itemChild.list_pic_url"
                        >
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                        <p style="text-align: center; font-size: 14px">{{ itemChild.name }}</p>
                        <p style="text-align: center; font-size: 14px; color: red; margin-top: 5px">
                            ￥{{ itemChild.retail_price }}元
                        </p>
                    </div>
                </div></van-tab
            >
        </van-tabs>
    </div>
</template>

<script>
import Loading from '../component/Loading.vue'
export default {
    name: 'Channel',
    data() {
        return {
            categoryList: [],
            paramsId: '',
            list: ['居家', '餐厨', '配件', '饮食', '志趣'],
            loadingShow:true
        }
    },
    components: {
        Loading
    },
    methods: {
        toProduction(id) {
            console.log(id)
            this.$router.push({
                name: 'SearchDetails',
                params: {
                    id: id
                }
            })
        }
    },
    created() {
        this.paramsId = this.$route.params.paramsId
        this.$http
            .get('/index/index')
            .then(res => {
                let { data } = res
                if (data.errno != 0) {
                    this.$notify({
                        type: 'danger',
                        message: data.errmsg
                    })
                    return
                }
                const { categoryList } = data.data
                let mapList = categoryList.map(item => {
                    for (let i in this.list) {
                        if (item.name == this.list[i]) {
                            return item
                        }
                    }
                })
                mapList.forEach(item => {
                    if (item) {
                        this.categoryList.push(item)
                    }
                })
                this.loadingShow = false
            })
            .catch(err => {
                console.log(err)
            })
    }
}
</script>

<style scoped>
.containerProduct {
    margin-top: 12px;
    display: flex;
    width: 100%;
    flex-flow: wrap;
    justify-content: space-between;
    padding-bottom: 80px;
}
.ImagProduct {
    margin: 15px;
    width: 40%;
    background-color: #fff;
}
</style>